<template>
	<view class="login-bg">
		<view :style="{height:statusBarHeight+'px'}"></view>

		
		<view class="flex-col top-title">
			<image src="/static/logo.png" style="width: 150rpx;height: 150rpx;"></image>
			<text style="font-size: 40rpx;color: #333333;margin-top: 40rpx;">云上绵州商家后台</text>
		</view>
	</view>
	<view class="content-bg">
		<input v-model="account" class="account-input" maxlength="20" placeholder="请输入账号" />
		
		
		<view class="password-bg">
			<input :password="showPassword" v-model="password" placeholder="请输入密码"/>
			<image v-if="showPassword" @click="showPassWordAction" src="/static/psw_close.png" style="width: 40rpx;height: 40rpx;"></image>
			<image v-else @click="showPassWordAction" src="/static/psw_open.png" style="width: 40rpx;height: 40rpx;"></image>
		</view>
		
		
		<view class="login-btn" @click="login">登录</view>
		
		<view class="flex-row items-center" style="margin: 50rpx;font-size: 28rpx;">
			
			<checkbox-group @change="onChange">
				<label>
					<checkbox :checked="isCheck" style="transform:scale(0.7)"/>我已阅读并同意
				</label>
				<label style="color: #5c8edc;" @click.stop="goAgr(1)">《服务协议》</label>
				<label>和</label>
				<label style="color: #5c8edc;" @click.stop="goAgr(2)">《隐私协议》</label>
			</checkbox-group>
			
		</view>
	</view>
</template>

<script>
	import { useUserStore } from '@/store/userStore.js'
	import { login } from '@/common/user_api.js'
	export default {
		data() {
			return {
				account:'',
				password:'',
				showPassword: true, 
				isCheck:false,
			};
		},
		onLoad() {
			
		},
		computed:{
			statusBarHeight(){
				return useUserStore().statusBarHeight + 44
			}
		},
		methods:{
			login(){
				if(!this.account){
					uni.$tools.toast('请输入账号')
					return;
				}
				if(!this.password){
					uni.$tools.toast('请输入密码')
					return;
				}
				if(!this.isCheck){
					uni.$tools.toast('请勾选协议')
					return;
				}
				
				
				setTimeout(()=>{
					useUserStore().setToken('111222333')
					uni.$tools.toast({
						icon: 'success',
						title: '登录成功',
						duration: 2000,
					}, { url: '/pages/index/index' ,type: 3})
				},1000)
				
				
			},
			goAgr(id){
				uni.navigateTo({
					url:'/pages/login/agreement?id=' + id
				})
			},
			onChange(){
				this.isCheck = !this.isCheck
			},
			showPassWordAction() {
			  this.showPassword = !this.showPassword; // 切换显示状态
			}
		}
	}
</script>

<style lang="scss">
.login-bg{
	position: relative;
	background-image: url('/static/login_bg.png');
	background-size: 100% 100%;
	// background-position: center;
	// background-repeat: no-repeat;
	height: 35vh;
}
.top-title{
	position: absolute;
	bottom: 0;
	left: 0;
	padding-left: 50rpx;
	padding-bottom: 50rpx;
}
.content-bg{
	background-color: #fff;
	min-height: 70vh;
	display: flex;
	flex-direction: column;
}
.account-input{
	border-radius: 45rpx;
	background-color: #F4F5F7;
	margin-left: 50rpx;
	margin-right: 50rpx;
	margin-top: 50rpx;
	height: 99rpx;
	padding-left: 30rpx;
}
.password-bg{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-left: 50rpx;
	margin-right: 50rpx;
	margin-top: 50rpx;
	border-radius: 45rpx;
	background-color: #F4F5F7;
	padding-left: 30rpx;
	padding-right: 50rpx;
	input {
		height: 99rpx;
		width: 70vw;
	}
}
.login-btn{
	margin-left: 50rpx;
	margin-right: 50rpx;
	border-radius: 48rpx;
	height: 99rpx;
	background-color: #3274F9;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 50rpx;
}
</style>
